<template>
  <Layout class="w1 h1 energy-effect-layout">
    <div class="layout-left-container">
      <Menu open-names="['1']" style="width: 100%;" :active-name="computedPath" @on-select="routerChange">
        <MenuItem name="/analysis/report">
        <Icon type="ios-paper" />
        统计报表
        </MenuItem>
        <Submenu name="1">
          <template slot="title">
            <Icon type="ios-stats" />
            分路用电
          </template>
          <MenuItem name="/analysis/ontime">实时数据报表</MenuItem>
          <MenuItem name="/analysis/dayly">日数据报表</MenuItem>
          <MenuItem name="/analysis/weekly">周数据报表</MenuItem>
          <MenuItem name="/analysis/monthly">月数据报表</MenuItem>
        </Submenu>
      </Menu>
    </div>
    <div class="layout-right-container">
      <router-view />
    </div>
  </Layout>
</template>
<script>
import "@/styles/analysis.scss"
export default {
  created() {
    const path = this.$route.path
    if (path.startsWith("/analysis/ontime")) {
      this.computedPath = "/analysis/ontime"
    } else if (path.startsWith("/analysis/dayly")) {
      this.computedPath = "/analysis/dayly"
    } else if (path.startsWith("/analysis/weekly")) {
      this.computedPath = "/analysis/weekly"
    } else if (path.startsWith("/analysis/monthly")) {
      this.computedPath = "/analysis/monthly"
    } else if (path.startsWith("/analysis/report")) {
      this.computedPath = "/analysis/report"
    }
  },
  watch: {
    $route() {
      const path = this.$route.path
      if (path.startsWith("/analysis/ontime")) {
        this.computedPath = "/analysis/ontime"
      } else if (path.startsWith("/analysis/dayly")) {
        this.computedPath = "/analysis/dayly"
      } else if (path.startsWith("/analysis/weekly")) {
        this.computedPath = "/analysis/weekly"
      } else if (path.startsWith("/analysis/monthly")) {
        this.computedPath = "/analysis/monthly"
      } else if (path.startsWith("/analysis/report")) {
        this.computedPath = "/analysis/report"
      }
    }
  },
  data: () => ({
    computedPath: ""
  }),
  methods: {
    routerChange(path) {
      this.$router.push({
        path
      })
    }
  }
}
</script>
